<template>
  <div v-show="mappopShow" v-bind:style="{top:popX+'px',left:popY+'px'}">
    <MglMap
      :accessToken="accessToken"
      :mapStyle="mapOptions.mapStyle"
      :zoom="mapOptions.zoom"
      :maxBounds="mapOptions.maxBounds"
      :center="mapOptions.center"
      :bearing="mapOptions.bearing"
      @load="onMapLoaded"
      :dragRotate="false"
      class="map"
    ></MglMap>
  </div>
</template>

<script>
import Mapbox from "mapbox-gl";
import {
  MglMap, MglMarker
} from "vue-mapbox";
export default {
  components: {
    MglMap, MglMarker
  },
  data() {
    return {
      accessToken: 'pk.eyJ1IjoibGFuZ2hhb2FiY2QiLCJhIjoiY2sxcjZ4aXg1MDI2MDNncWNxcHlvNDU0NyJ9.i05JLkyr2CsyJvFoMDzZmA', // your access token. Needed if you using Mapbox maps
      mapOptions: {
        mapStyle: 'mapbox://styles/mapbox/streets-v9',
        center: [121.46960637043458, 30.7913819151417],
        // maxBounds: [[121.45928724454387, 30.78519614578238], [121.47992549632482, 30.797567286556315]],
        zoom: 15.544687811205444,
        bearing: -20
      }
    }
  }
}
</script>